<template>
  <Paglist v-model="dataList" :parame="parame" :is-init-api="false" @register="register">
    <template v-for="v in dataList" :key="v.memberId">
      <Item :item="v" @success="refresh" />
    </template>
  </Paglist>
</template>
<script lang="ts" setup>
  import { leadingMemberList } from '@/api/admin';
  import { type ILeadingMemberListResData } from '@/api/admin/types';
  import Paglist from '@/components/Paglist/index.vue';
  import Item from './Item.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref, watch } from 'vue';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    id: propTypes.number,
  });

  provide('api', (obj: any) => {
    return leadingMemberList(obj).then((r) => {
      total.value = r.total;
      return r;
    });
  });

  const emit = defineEmits(['update:modelValue']);

  const total = ref(0);
  const dataList = ref<ILeadingMemberListResData[]>();

  const parame = reactive({
    cocId: 0,
  });

  watch(
    () => props.id,
    (val) => {
      parame.cocId = val;
      refresh && refresh();
      emit('update:modelValue', () => refresh());
    },
  );

  // const handleRefresh = () => {
  //     refresh && refresh();
  // }

  const [register, { refresh }] = useConList();
</script>

<style lang="scss" scoped></style>
